import React, { Component } from 'react'
import axios from "axios";
import PropTypes from "prop-types";
import "./index.css";

export default class Search extends Component {

  static propTypes = {
    updateAppState: PropTypes.func.isRequired
  }

  search = () => {
    let {keyWordElement: {value: keyWord}} = this;
    this.props.updateAppState({isFirst: false, isLoading: true, err: ''});
    axios.get('https://api.github.com/search/users?q='+keyWord).then(
      response => {
        console.log('成功了',response.data)
        this.props.updateAppState({isLoading: false, list: response.data.items});
      },
      error => {
        console.log('失败了',error)
        this.props.updateAppState({isLoading: false, err: error.message});
      }
    )
  }

  render() {
    return (
      <div className="search-box">
        <input ref={c => this.keyWordElement = c} type="text" placeholder='输入用户名进行搜索'/>
        <button onClick={this.search}>搜索</button>
      </div>
    )
  }
}
